<!-- 评价页面 -->
<template>
    <div>
        <div class="van-head">
            <van-config-provider :theme-vars="themeVars">
                <van-nav-bar
                title="评价"
                left-arrow
                :border="false"
                fixed="true"
                style=" background-color: #eae9e5 ;"
                @click-left="onClickLeft"
                />
                <div style=" height: 46px;"></div>
                <div style="padding: 10px 20px;">
                    <div style=" height: 28px; position: relative;">
                        <van-icon style=" position: absolute;" size="40" name="shop-o" />
                        <span style=" position: absolute; top: 10px;left: 48px;">店铺服务</span>
                        <van-rate style=" margin-left: 126px;margin-top: 8px;" v-model="stars1" :size="24" color="#c1ab96" void-icon="star" void-color="#eae9e5" @change="onChange1" />
                        <span style=" color: #999999; position: absolute; top: 9px;right: 30px;">{{stars1value}}</span>
                    </div>
                    <van-divider :style="{ borderColor:'#eae9e5'}"/>
                    <div style=" width: 100%; ">
                        <textarea style=" width: 100%; overflow: auto; border: 0px;" cols="100" rows="6" placeholder="谈谈您对产品的想法吧~"></textarea>
                        <van-divider :style="{ borderColor:'#eae9e5'}"/>
                        <van-uploader v-model="fileList" multiple />
                        <div style=" height: 28px; position: relative;">
                            <span style=" position: absolute; top: 6px;">店铺服务</span>
                            <van-rate style=" margin-left: 80px;margin-top: 6px;" v-model="stars2" :size="24" color="#c1ab96" void-icon="star" void-color="#eae9e5" @change="onChange2" />
                            <span style=" color: #999999; position: absolute; top: 6px;right: 74px;">{{stars2value}}</span>
                            <van-divider :style="{ borderColor:'#eae9e5'}"/>
                        </div>
                        <div style=" height: 28px; margin-top: 32px; position: relative;">
                            <span style=" position: absolute; top: 6px;">物流服务</span>
                            <van-rate style=" margin-left: 80px;margin-top: 6px;" v-model="stars3" :size="24" color="#c1ab96" void-icon="star" void-color="#eae9e5" @change="onChange3" />
                            <span style=" color: #999999; position: absolute; top: 6px;right: 74px;">{{stars3value}}</span>
                            <van-divider :style="{ borderColor:'#eae9e5'}"/>
                        </div>
                    </div>
                </div>
                <div style=" background-color: white; padding:20px; position: fixed; z-index: 999; bottom: 0; border-top: 2px solid #eae9e5;">
                    <van-button round plain color="#c3af98" size="small" style="padding: 0px 16px 0px 16px; margin-left: 150px; font-weight: bold; box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.1);">申请售后</van-button>
                    <van-button round plain @click="forevaluation" color="#c3af98" size="small" style="padding: 0px 30px 0px 30px; margin-left: 16px; font-weight: bold; box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.1);">评价</van-button>
                </div>
            </van-config-provider>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref ,watch} from 'vue';
import { Toast } from 'vant';
import { useRouter } from "vue-router";
const router =useRouter();
const onClickLeft = () => history.back();
const themeVars = {
    NavBarIconColor:'#c1ab96',
};
const stars1 = ref(0);
const stars2 = ref(0);
const stars3 = ref(0);
const stars1value = ref('评价');
const stars2value = ref('评价');
const stars3value = ref('评价');
const onChange1 = (stars1) => {
    if(stars1==0){stars1value.value='评价'}
    if(stars1==1){stars1value.value='糟糕'}
    if(stars1==2){stars1value.value='很差'}
    if(stars1==3){stars1value.value='一般'}
    if(stars1==4){stars1value.value='不错'}
    if(stars1==5){stars1value.value='优秀'}
}
const onChange2 = (stars2) => {
    if(stars2==0){stars2value.value='评价'}
    if(stars2==1){stars2value.value='糟糕'}
    if(stars2==2){stars2value.value='很差'}
    if(stars2==3){stars2value.value='一般'}
    if(stars2==4){stars2value.value='不错'}
    if(stars2==5){stars2value.value='优秀'}
}
const onChange3 = (stars3) => {
    if(stars3==0){stars3value.value='评价'}
    if(stars3==1){stars3value.value='糟糕'}
    if(stars3==2){stars3value.value='很差'}
    if(stars3==3){stars3value.value='一般'}
    if(stars3==4){stars3value.value='不错'}
    if(stars3==5){stars3value.value='优秀'}
}
const forevaluation =()=>{
    Toast.success({
        message: '评价成功！',
        icon: 'passed',
    });
    //这里应设置跳转去总评价页面
    router.push('/')
}
const fileList = ref([
    { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
    { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg', isImage: true },
]);
</script>
<style>
/* overflow-y: visible; */
    /* overflow: auto; */
</style>